import React, { useEffect, useState } from 'react'
import GTitle from '../../components/GTitle/GTitle'
import { Button } from 'antd'
import { useLocation, useRouteMatch, useHistory } from 'react-router-dom'
import { Table, Tag, Space } from 'antd';
import axios from '../../axios';
import mock from '../../mock';
import MainBox from '../../components/MainBox/MainBox';
mock.getdevicelist()
const columns = [
  {
    title: '设备',
    dataIndex: 'name',
    key: 'name',
    render: text => <a>{text}</a>,
    sorter: {
      compare: (a, b) => a.name - b.name,
      multiple: 3,
    },
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
    sorter: {
      compare: (a, b) => a.price - b.price,
      multiple: 3,
    },
  },
  {
    title: '数量',
    dataIndex: 'count',
    key: 'count',
    sorter: {
      compare: (a, b) => a.count - b.count,
      multiple: 3,
    },
  }
];

export default () => {
  let [tableData, useTableData] = useState([])
  const router = useHistory()
  function onChange(pagination, filters, sorter, extra) {
  }
  function rowClick(row) {
    router.push('/device/deviceDetail/' + row.id, row)
  }
  useEffect(() => {
    axios.get('/getdevicelist').then(res => {
      console.log(`res`, res)
      useTableData(res.list)
    })
  }, [])
  return (<div id="pageDevice">
    <GTitle title="设备">
      <Button type="primary">新增</Button>
    </GTitle>
    <MainBox>
      <Table columns={columns} dataSource={tableData}
        onChange={onChange} onRow={record => {
          return {
            onClick: event => { rowClick(record) }, // 点击行
          };
        }} />
    </MainBox>
  </div>)
}